<template>
  <div
    @tap="clickBtn"
    class="je-audio-btn float-btn"
  >
    <i
      v-if="type === 'icon'"
      :class="`${text} jeicon`"
    />
    <span
      v-else
      class="text"
    >{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: () => 'text',
    },
    text: {
      type: String,
      default: () => 'jeicon-new-fine-plus-circle',
    },
  },
  mounted() {
    Waves.init();
  },
  methods: {
    clickBtn() {
      Waves.attach('.float-btn', ['waves-circle']);
      this.$emit('tap');
    },
  },
};
</script>

<style lang="less" scoped>
  @import "~@/theme/index.less";
  .float-btn {
    position: fixed;
    z-index: 998;
    bottom: 80 * @hd;
    right: 40 * @hd;
    background: #536DFE;
    border-radius: 100%;
    width: 50 * @hd;
    height: 50 * @hd;
    display: flex;
    align-items: center;
    justify-content: center;
    .jeicon {
      color: #ffffff;
      font-size: 20 * @hd;
    }
  }
  .text {
    font-size: 17 * @hd;
    color: #ffffff;
  }
</style>
